<template>
  <el-col :span="24">
    <el-card class="card">
      <div style="width: 50%;margin: 0 auto">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="个人昵称" prop="name">
            <el-input v-model.trim="form.name" placeholder="输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.sex" :label="1">男</el-radio>
            <el-radio v-model="form.sex" :label="2">女</el-radio>
          </el-form-item>

          <!--<el-form-item label="头像">
        <el-upload class="avatar-uploader"
                   :action="baseUrl+'/saveAvatar'"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>-->
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.trim="form.phone" placeholder="请输入手机号码">
            </el-input>
          </el-form-item>
          <el-form-item label="个人介绍" prop="introduce">
            <el-input type="textarea" v-model.trim="form.introduce" :rows="6" maxlength="200" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">提交</el-button>
            <el-button @click="onReset('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </el-col>
</template>

<script>
import {
  axiosUtil
} from "../network/axiosUtil";

export default {
  name: "MineInfo",
  data () {
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error("昵称不能为空"))
      } else {
        callback()
      }
    };
    // 手机号验证
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      }
    }
    const validateInfo = (rule, value, callback) => {
      if (value === '') {
        callback(new Error("个人介绍不能为空"))
      } else {
        callback()
      }
    }
    return {
      form: {
        username: '',
        name: '',
        sex: 1,
        phone: '',
        introduce: ''
      },
      rules: {
        name: [{
          validator: validateName,
          trigger: 'blur'
        }],
        introduce: [{
          validator: validateInfo,
          trigger: 'blur'
        }],
        phone: [{
          validator: validatePhone,
          trigger: "blur"
        }]
      },
      imageUrl: '',
      backImgUrl: ''
    }
  },
  methods: {
    onSubmit (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          var params = this.$refs[form].model
          axiosUtil({
            url: '/user/update',
            method: 'POST',
            data: {
              user: params
            }
          }).then(data => {
            if (data != null) {
              this.$message({
                type: 'success',
                message: "保存成功"
              })
              this.$refs[form].resetFields()
              this.$store.state.userInfo.user = data
              // this.imageUrl = ''
              // this.backImgUrl = ''
            } else {
              this.$message.error('保存个人信息失败！')
            }
          }).catch(err => {
            console.log(err);
          })
        } else {
          this.$message.error("提交失败")
          return false
        }
      })
    },
    onReset (form) {
      this.$refs[form].resetFields();
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      alert("before")
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M && (isPNG || isJPG);
    },
    backAvatarSuccess (res, file) {
      this.backImgUrl = URL.createObjectURL(file.raw);
    }
  },
  components: {
    axiosUtil
  },
  mounted () {
    this.form = this.$store.state.userInfo.user
    console.log(this.form)
  },
}
</script>

<style scoped>
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>